<template>
  <div style="width: 1200px;margin:0px auto">
    <el-container>
      <el-header>
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect">
        </el-autocomplete>
        <!--          搜索提交-->
        <el-button type="danger" icon="el-icon-search" circle></el-button>
        <!--          购物车提交-->

        <router-link to="/ShopCar">
          <el-button type="danger" icon="el-icon-shopping-cart-2" circle></el-button>
        </router-link>


        <!--          我的-->
        <router-link to="/UserMessage">
          <el-button type="danger" icon="el-icon-user-solid" circle></el-button>
        </router-link>
      </el-header>

      <el-container>

        <el-aside width="300px">

          <el-carousel :interval="3000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <div class="demo-image">

                <router-link to="/">
                  <span class="demonstration">{{ fit }}</span>
                  <el-image
                    style="width: 300px; height: 300px"
                    :src="goodsDetails.gdimage"
                    :preview-src-list="srcList"></el-image>
                </router-link>

              </div>
            </el-carousel-item>
          </el-carousel>
        </el-aside>

        <el-container>
          <el-main>
            <el-row :gutter="20">
              <el-col :span="8">名称：
                {{goodsDetails.gdname}}
              </el-col>

            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                详情：
                {{goodsDetails.gddetails}}
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">


                <el-input-number v-model="goodsDetails.number" :step="1" size="mini" :min="1" :max="10" step-strictly/>

                <div class="grid-content bg-purple"></div>

              </el-col>
            </el-row>
          </el-main>
          <el-footer>
            <el-table-column align="center" label="加入购物车">
              <el-button type="danger" round @click="setCar(goodsDetails.number,goodsDetails.gdid)">加入购物车</el-button>

            </el-table-column>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from 'axios'


  export default {
    name: "details",

    data() {
      return {
        num: 1,
        goodsDetails: {
          gdid: '',
          gdname: '',
          gdimage: '',
          gddetails: '',
          gdprice: '',
          number: ''

        },
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],

        restaurants: [],
        state: '',
        timeout: null

      }
    },

    methods: {
      loadAll() {
        return [
          {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
          {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
          {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"}

        ];
      }
      ,
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
          },
          3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      }
      ,
      handleSelect(item) {
        console.log(item);
      },
      selectOne: function () {
        var gdid = this.$route.params.gdid

        var _this = this
        axios.get("/api/goodsDetails/getdetailsByGBid/" + gdid).then(function (res) {

          _this.goodsDetails = res.data
          /*    alert(_this.goodsDetails)*/
        })


      },

      setCar: function (number, gdid) {
        axios.post(`/api/goodsDetails/setCar/${number}/${gdid}`)
      }
    }
    ,
    mounted() {
      this.restaurants = this.loadAll();
      this.selectOne();
    }

  }
</script>

<style>
  .el-header, .el-footer {
    background-color: #fa211f;
    color: #f6474a;
    text-align: right;

    line-height: 60px;
  }

  .el-aside {
    background-color: #fafafa;
    color: #f6474a;
    text-align: left;
    line-height: 200px;
  }

  .el-main {
    background-color: #fafafa;
    color: #f61b00;
    text-align: left;
    line-height: 100px;
  }

  .el-footer {
    background-color: #fa211f;
    color: #fafafa;
    text-align: right;
    line-height: 60px;
  }


  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }


  .el-row {
    margin-bottom: 20px;

  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #fafafa;
  }

  .bg-purple {
    background: #fafafa;
  }

  .bg-purple-light {
    background: #fafafa;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
